<script setup lang='ts'>
import { reactive } from 'vue'

const ha = ref('是')
const linkBackup = ref('主备')
const visible = defineModel<boolean>()

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  customer: '',
})
const linkNames = computed(() => {
  return linkBackup.value === '主备' ? ['主链路', '备链路'] : ['承载 1', '承载 2']
})
</script>

<template>
  <el-dialog
    v-model="visible"
    title="节点业务模板"
    width="800px"
    :before-close="() => visible = false"
  >
    <el-form-item label="模板名称*">
      <el-input />
    </el-form-item>
    <el-divider direction="horizontal">
      基础信息
    </el-divider>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="HA*">
        <el-radio-group v-model="ha">
          <el-radio v-for="item in ['是', '否']" :key="item" :label="item">
            {{ item }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="链路备份">
        <el-radio-group v-model="linkBackup">
          <el-radio-button label="主备" />
          <el-radio-button label="负载" />
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="ha === '是' ? 'CPE1接入方式' : '接入方式'">
        <div v-for="item in linkNames" :key="item" mr5 flex-y-center>
          {{ item }}：
          <div>
            <el-radio-button v-for="item in ['专线', '公网', '4/5G']" :key="item" :label="item">
              {{ item }}
            </el-radio-button>
          </div>
        </div>
      </el-form-item>
      <el-form-item v-if="ha === '是'" label="CPE2接入方式">
        <div v-for="item in linkNames" :key="item" mr5 flex-y-center>
          {{ item }}：
          <div>
            <el-radio-button v-for="item in ['专线', '公网', '4/5G']" :key="item" :label="item">
              {{ item }}
            </el-radio-button>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <el-divider direction="horizontal">
      高级服务
    </el-divider>
    <el-descriptions
      class="margin-top"
      :column="5"
      border
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            防火墙配置
          </div>
        </template>
        <el-radio v-for="item in ['是', '否']" :key="item" :label="item">
          {{ item }}
        </el-radio>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            应用选路
          </div>
        </template>
        <el-radio v-for="item in ['是', '否']" :key="item" :label="item">
          {{ item }}
        </el-radio>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            特殊监控
          </div>
        </template>
        <el-checkbox-group v-model="accessType">
          <el-checkbox label="端到端监控" value="云网络" />
          <el-checkbox label="自定义监控" value="外部网络" />
        </el-checkbox-group>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            流量分析
          </div>
        </template>
        <el-radio v-for="item in ['是', '否']" :key="item" :label="item">
          {{ item }}
        </el-radio>
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <span>
        <el-button @click=" visible = false">关闭</el-button>
        <el-button type="primary" @click="visible = false">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
